﻿<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%
String path = request.getContextPath() + "/";
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path;
%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<head>
	<base href="<%=basePath%>">
	<title>设备首页</title>
	<meta http-equiv="pragma" content="no-cache">  
	<meta http-equiv="cache-control" content="no-cache">  
	<meta http-equiv="expires" content="0">  
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="css/style2/d_common.css">
	<link rel="stylesheet" href="css/style2/common1.css">
	<script src="js/jquery-1.9.1.js"></script>
	<script src="js/layer/layer.js"></script>
	<style type="text/css">
		.mengban{
			position:fixed;
			width: 100%;
			height: 100%;
			top: 0px;
			left: 0px;
			background: #000;
			-webkit-opacity: 0.5;
			-moz-opacity: 0.5;
			-ms-opacity: 0.5;
			-khtml-opacity: 0.5;
			opacity: 0.5;
			filter:alpha(opacity=50);
			display: none;
		}
		/*#loginBoard{
		height: 200px;
		margin: -100px 0 0 -150px;
	}*/

	</style>
</head>
<body class="bg1">
<div class="header">
	<div class="logo"><img src="img/n_logo.png" alt="">&nbsp;</div>
	<div id="log_reg">
		<img src="img/man.png" alt="">
		<a id="logBtn">登录</a>
		<span>|</span>
		<a id="regBtn">注册</a>
	</div>
	
	<!--<%--<div class="user">
	<img src="img/man.png" alt="">
	<div class="admin">
		<span class="name">${user.name }</span><br>
		<span class="number">${user.cardno }</span>
	</div>
</div>
	--%>
	<c:if test="${isLogin!='0' }">
		<div id="log_reg">
			<a id="logBtn">登录</a>
			<span>|</span>
			<a id="regBtn">注册</a>
		</div>
	</c:if>-->
</div>
<div class="main first-main">
    <div class="first-list">
        <div class="startRead" onclick="gotoChoose();"></div>
        <div class="rank" onclick="window.location.href='<%=basePath%>declaimer/bd?guid=${guid}&devicecode=${devicecode}'"></div>
        <div class="notice" onclick="window.location.href='<%=basePath%>declaimer/activity?guid=${guid}&devicecode=${devicecode}'"></div>
    </div>

	<!--<ul class="list clear">-->
		<!--<li>-->
			<!--<a href="javascript:void(0);" onclick="gotoChoose();" class="reader">-->
				<!--<img src="img/literature.png" alt=""><br>-->
				<!--<span style="color:#000;">文学</span>-->
			<!--</a>-->
		<!--</li>-->
		<!--<li>-->
			<!--<a href="javascript:;" class="rank">-->
				<!--<img src="img/novel.png" alt=""><br>-->
				<!--<span style="color:#000;">小说</span>-->
			<!--</a>-->
		<!--</li>-->
		<!--<li>-->
			<!--<a href="javascript:;" class="activity">-->
				<!--<img src="img/prose.png" alt=""><br>-->
				<!--<span style="color:#000;">散文</span>-->
			<!--</a>-->
		<!--</li>-->
		<!--<li style="margin-right: 0;">-->
			<!--<a href="javascript:;"class="expect">-->
				<!--<img src="img/other.png" alt=""><br>-->
				<!--<span style="color:#000;">其他</span>-->
			<!--</a>-->
		<!--</li>-->
	<!--</ul>-->
</div>

<div class="footer">
	<div class="footer-content">
		<c:if test="${isLogin!='1' }"><img src="https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=${ticket }" alt="" class="footerimg1"></c:if>
    	<c:if test="${isLogin=='1' }"><img src="img/wx.png" alt="" class="footerimg1"></c:if>
		<ul>
			<li style="margin-left: 36px;margin-top: 77px;font-size: 18px;"><span></span>欢迎使用莱柏锐朗读亭</li>
			<li style="margin-left: 36px;font-size: 18px;"><span></span>朗读亭提供朗读录制服务</li>
		</ul>
		<!--<c:if test="${isLogin!='1' }"><img src="https://mp.weixin.qq.com/cgi-bin/showqrcode?ticket=${ticket }" alt="" class="footerimg1"></c:if>-->
		<!--<c:if test="${isLogin=='1' }"><img src="img/wx.png" alt="" class="footerimg1"></c:if>-->
	</div>
	<div class="copyright" style="margin-top: 72px;font-size: 18px;">
		<%-- ${c.footer } --%>
	</div>
</div>

<div class="mengban"></div>
<div id="ruleTip" >
	<p class="c-title">朗读声明</p>
	<ol>
		<li>用户在使用信昇达朗读亭之前，均应仔细阅读本声明，一旦使用，即视为接受本声明的全部内容。声明如下：</li>
		<li>1、任何个人或机构都不得朗读或录制色情、暴力或政治敏感素材；</li>
		<li>2、任何个人或机构通过朗读亭朗读的个人或机构素材，信昇达不对该素材内容之合法性、准确性、真实性、适用性、安全性负责；信昇达不代表该素材内容的任何主张或立场；</li>
		<li>3、朗读亭配有全程监控录像，使用过程中，不得蓄意破坏或损坏朗读亭设备，否则将追究其法律责任；</li>
		<li>同意上诉规则可进入朗读，取消退出。</li>
	</ol>
	<p><a class="btn" id="c-agree">同意</a><a class="btn" id="c-cancel">取消</a></p>
</div>
<!--点击登录按钮的弹出面板-->
<div id="loginBoard">
	<div class="title clear">
		<p class="c-title fl">朗读亭用户登录</p>
		<span class="closeBtn fr"></span>
	</div>
	<form>
		<ul id="login-namePwd">
			<li><span class="account"></span><input type="text" id="l-username"></li>
			<li><span class="pw"></span><input type="password" id="l-userpwd"></li>
			<li class="zhzc"><a >账号注册</a>
			<li><a class="btn" id="loginNow">立即登录</a>
				<%--<a class="btn" id="l-cancel">取消</a></li>--%>
		</ul>
	</form>
	<!--数字字母键盘-->
	<div class="keyBoard" id="keyBoard2">
		<p class="num-a"><a>1</a>
			<a>2</a>
			<a>3</a>
			<a>4</a>
			<a>5</a>
			<a>6</a>
			<a>7</a>
			<a>8</a>
			<a>9</a>
			<a>0</a>
		</p>
		<p class="key-a"><a>Q</a>
			<a>W</a>
			<a>E</a>
			<a>R</a>
			<a>T</a>
			<a>Y</a>
			<a>U</a>
			<a>I</a>
			<a>O</a>
			<a>P</a>
		</p>
		<p class="key-a">
			<a>A</a>
			<a>S</a>
			<a>D</a>
			<a>F</a>
			<a>G</a>
			<a>H</a>
			<a>J</a>
			<a>K</a>
			<a>L</a>
		</p>
		<p class="key-a">
			<a>Z</a>
			<a>X</a>
			<a>C</a>
			<a>V</a>
			<a>B</a>
			<a>N</a>
			<a>M</a>
			<a>Del</a>
			<a>←</a>
		</p>
	</div>
</div>

<!--点击注册按钮的弹出面板-->
<div id="regBoard">
	<div class="title clear">
		<p class="c-title fl">朗读亭用户注册</p>
		<span class="closeBtn fr"></span>
	</div>
	<form>
		<ul id="login-namePwd">
			<li><span><img src="img/account.png" alt=""></span><input type="text" id="username" placeholder="输入账号"></li>
			<li><span><img src="img/pw.png" alt=""></span><input type="password" id="userpwd" placeholder="输入7-12位的密码"> </li>
			<li><span><img src="img/pw.png" alt=""></span><input type="password" id="copypwd" placeholder="再一次输入密码"></li>
			<li><a class="btn" id="registNow">立即注册</a>
				<!--<a class="btn" id="cancel">取消</a></li>-->
		</ul>
	</form>
	<!--数字字母键盘-->
	<div class="keyBoard" id="keyBoard1">
		<p class="num-a"><a>1</a>
			<a>2</a>
			<a>3</a>
			<a>4</a>
			<a>5</a>
			<a>6</a>
			<a>7</a>
			<a>8</a>
			<a>9</a>
			<a>0</a>
		</p>
		<p class="key-a"><a>Q</a>
			<a>W</a>
			<a>E</a>
			<a>R</a>
			<a>T</a>
			<a>Y</a>
			<a>U</a>
			<a>I</a>
			<a>O</a>
			<a>P</a>
		</p>
		<p class="key-a">
			<a>A</a>
			<a>S</a>
			<a>D</a>
			<a>F</a>
			<a>G</a>
			<a>H</a>
			<a>J</a>
			<a>K</a>
			<a>L</a>
		</p>
		<p class="key-a">
			<a>Z</a>
			<a>X</a>
			<a>C</a>
			<a>V</a>
			<a>B</a>
			<a>N</a>
			<a>M</a>
			<a>Del</a>
			<a>←</a>
		</p>
	</div>
</div>

<script>
    //账号注册切换
    $('.zhzc').click(function () {
      $('#loginBoard').hide();
      $('#regBoard').show();
      $('#username').focus();//用户名聚焦
    });

    //登录须知
    $('#logBtn').click(function () {
      //$('#ruleTip').show()
    });

   var i = 120;
   Timeout();
   function Timeout(){
      if(i>0){
         i--;
         setTimeout(function(){Timeout();},1000);
      }else{
    	 var temp="";
         $.ajax({
            async : false,
            cache : false,
            type : 'post',
            dataType : "json",
            url :  'declaimer/removeDeviceUse?devicecode=${devicecode }',// 请求的action路径
            success : function(data) {
               //window.location.reload();
               alert("登录超时"+data);
               temp = "超时";
            }
         });
         alert(temp+'   end');
      }
   }
   function gotoChoose(){

      $.ajax({
         async : false,
         cache : false,
         type : 'post',
         dataType : "json",
         url :  'declaimer/findUser?devicecode=${devicecode }',// 请求的action路径
         error : function(XMLHttpRequest, textStatus, errorThrown) {
            //layer.msg("请求失败！");
         },
         success : function(data) {
            //cll：判断是否登录
            if(data.state=="1"){

               //询问框,朗读规则内容，可以是文字，也可写html
               var ruleTip=$("#ruleTip");
               var mengban=$(".mengban");
               ruleTip.fadeIn();
               mengban.fadeIn();
               var agree=$("#c-agree");
               agree.unbind('click');
               agree.click(function(){
                  setTimeout("gotoPage('"+data.message+"')",100);
                  ruleTip.fadeOut();
                  mengban.fadeOut();
               });
               var cancel=$("#c-cancel")
               cancel.unbind('click');
               cancel.click(function(){
                  ruleTip.fadeOut();
                  mengban.fadeOut();
                  //询问框
                  layer.confirm('是否退出此次登录？', {
                     btn: ['是','否'] //按钮
                  }, function(){
                     $.ajax({
                        async : false,
                        cache : false,
                        type : 'post',
                        dataType : "json",
                        url :  'declaimer/removeDeviceUse?devicecode=${devicecode }',// 请求的action路径
                        success : function(data) {
                           layer.msg('已退出', {icon: 1});
                        }
                     });

                  }, function(){

                  });
               });
               // setTimeout("gotoPage('"+data.message+"')",100);
            }else{
               layer.msg(data.message,{icon:0});
            }
         }
      });
   }
   function gotoPage(cardno){
      window.location.href="<%=basePath%>declaimer/mtype?guid=${guid }&devicecode=${devicecode}&cardno="+cardno;
   }

   function register(){
      var regBtn=$("#regBtn");
      var mengban=$(".mengban");
      var regBoard=$("#regBoard");
      var cancel=$("#cancel");

      regBtn.click(function(){
         regBoard.fadeIn();
         mengban.fadeIn();
         $("#username").focus();
      });
      cancel.click(function(){
         regBoard.fadeOut();
         mengban.fadeOut();
      });
   }
   function login(){
      var logBtn=$("#logBtn");
      var mengban=$(".mengban");
      var regBoard=$("#loginBoard");
//      var cancel=$("#l-cancel");
      var agree=$("#c-agree");
      var cancel=$("#c-cancel");
      var ruleTip=$("#ruleTip");

      logBtn.click(function(){
         $.ajax({
            async : false,
            cache : false,
            type : 'post',
            dataType : "json",
            url :  'declaimer/findUser?devicecode=${devicecode }',// 请求的action路径
            error : function(XMLHttpRequest, textStatus, errorThrown) {alert(3)
               //layer.msg("请求失败！");
            },
            success : function(data) {
               //cll：判断是否登录
               if(data.state=="1"){
                  layer.confirm('是否退出此次登录？', {
                     btn: ['是','否'] //按钮
                  }, function(){
                     $.ajax({
                        async : false,
                        cache : false,
                        type : 'post',
                        dataType : "json",
                        url :  'declaimer/removeDeviceUse?devicecode=${devicecode }',// 请求的action路径
                        success : function(data) {
                           layer.msg('已退出', {icon: 1});
                           regBoard.fadeIn();
                           mengban.fadeIn();
                           $("#l-username").focus();
                        }
                     });

                  }, function(){
                     gotoPage(data.message);
                  });
               }else{
                 //须知弹框
                 ruleTip.fadeIn();
                 //同意按钮点击跳转登录弹窗
                 agree.click(function () {
                   regBoard.fadeIn();
                   mengban.fadeIn();
                   ruleTip.hide();
                   $("#l-username").focus();  //用户名聚焦
                 });
                 //取消按钮
                 cancel.click(function () {
                   ruleTip.fadeOut();
                 });
               }
            }
         });

      });
      cancel.click(function(){
         regBoard.fadeOut();
         mengban.fadeOut();
      });
      $('.closeBtn').click(function(){
        $('#loginBoard').hide()
        $('#regBoard').hide()
         mengban.fadeOut();
      });
   }
   $(function(){
      register();
      login();
      var reginput=$("#regBoard input");
      var loginput=$("#loginBoard input");
      reginput.focus(function(){
         var inputId=$(this).attr("id");
         keyBoard(inputId);
      });
      loginput.focus(function(){
         var inputId=$(this).attr("id");
         keyBoard(inputId);
      });
      var keybtn=$(".keyBoard a");

      /*禁止文字被选中*/
      keybtn.each(function(){
         $(this).attr("onselectstart","return false");
      });
      //用户注册
      $("#registNow").click(function(){
         if($("#username").val()==''){
            layer.msg("用户名不能为空！");
            return;
         }
         if($("#copypwd").val()==''){
            layer.msg("用户密码不能为空！");
            return;
         }
         if($("#copypwd").val()!=$("#userpwd").val()){
            layer.msg("两次密码不一致！");
            return;
         }
         $.ajax({
            async : false,
            cache : false,
            type : 'post',
            dataType : "json",
            url :  'declaimer/save_user?cardno='+$("#username").val()+'&guid=${guid}&password='+$("#copypwd").val(),// 请求的action路径
            success : function(data) {
               if(data.state=='1'){
                  layer.msg(data.message);
                  $("#loginBoard").fadeOut();
                  $(".mengban").fadeOut();
               }else{
                  layer.msg(data.message);
               }
            }
         });
      });
      //用户登录
      $("#loginNow").click(function(){
         if($("#l-username").val()==''){
            layer.msg("用户名不能为空！");
            return;
         }
         if($("#l-userpwd").val()==''){
            layer.msg("用户密码不能为空！");
            return;
         }
         $.ajax({
            async : false,
            cache : false,
            type : 'post',
            dataType : "json",
            url :  'declaimer/login?cardno='+$("#l-username").val()+'&guid=${guid}&devicecode=${devicecode }&password='+$("#l-userpwd").val(),// 请求的action路径
            success : function(data) {
               if(data.state=='1'){
                  gotoPage($("#l-username").val());
               }else{
                  layer.msg(data.message);
               }
            }
         });
      });
   });

   function keyBoard(inputId){
      var inputNow=$("#"+inputId);
      var keybtn=$(".keyBoard a");

      keybtn.unbind("click");
      keybtn.click(function(){
         var val='';
         if($(this).text()=="D"){
            inputNow.val('');
         }else if($(this).text()=="←"){
            var ival=inputNow.val();
            var val=ival.substring(0,ival.length-1);
            inputNow.val(val);
         }else{
            var val=$(this).text();
            var ival=inputNow.val();
            inputNow.val(ival+val);
         }
      });
   }

</script>
</body>
</html>